<template>
	<jc-page>
		<view class="u-page">
			<!-- 下拉刷新组件,可参考 https://ext.dcloud.net.cn/plugin?id=3935-->
			<z-paging ref="paging" v-model="formData.dataList" @query="queryList">
				<!-- 将不需要参与滚动的部分，放在slot="top"的view中，如果只有一个标签，可以直接在此标签上写slot="top"，将自定义的导航栏放到里面即可 -->
				<view slot="top">
					<u-navbar :is-back="false" :title="title" :title-color="vuex_titleColor"
						:background="vuex_navBackground"></u-navbar>
				</view>
				<!-- 
					设置自己的emptyView组件，非必须。空数据时会自动展示空数据组件，不需要自己处理, 具体参数可参考 https://z-paging.com/api/props/empty.html
					组件包禁止更新，自定义按钮部分为自定义扩展，更新后会有影响
				-->
				<z-paging-empty-view slot="empty" empty-view-text="购物车空空如也，赶紧去购买吧~"
					empty-view-img="/static/empty/noCart.png" empty-view-fixed show-empty-view-custom
					@click.native="emptyCustomClick()" empty-view-custom-text="去首页看看"
					:empty-view-custom-style="{'border': 'solid 1px #d81e06','color':'#ffffff','background-color': '#d81e06'}">
				</z-paging-empty-view>
				<!-- 具体的页面内容 -->

			</z-paging>
		</view>
		<view class="cu-tabbar-height"></view>
	</jc-page>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					dataList: [] //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				}
			}
		},
		computed: {
			title() {
				return this.$t('cart.title')
			}
		},
		mounted: function() {

		},
		methods: {
			//模拟onShow方法
			onHandleShow() {
				
			},
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(null)
			},
			emptyCustomClick() {
				this.$emit('navMethod','home');
				// uni.navigateTo({
				// 	url: '/pages/shop/shop',
				// 	animationType: 'fade-in'
				// });
			}
		}
	}
</script>

<style>

</style>